<div class="p+">
    <lx-dropdown>
        <lx-dropdown-toggle>
            <lx-button>Dropdown menu</lx-button>
        </lx-dropdown-toggle>

        <lx-dropdown-menu>
            <ul>
                <li><a class="dropdown-link">An action</a></li>
                <li><a class="dropdown-link">Another action</a></li>
                <li><a class="dropdown-link">Something else here</a></li>
                <li class="dropdown-divider"></li>
                <li><span class="dropdown-link dropdown-link--is-header">Header</span></li>
                <li><a class="dropdown-link">Separated link</a></li>
            </ul>
        </lx-dropdown-menu>
    </lx-dropdown>

    <lx-dropdown>
        <lx-dropdown-toggle>
            <lx-button>Dropdown menu with icons</lx-button>
        </lx-dropdown-toggle>

        <lx-dropdown-menu>
            <ul>
                <li>
                    <a class="dropdown-link">
                        <i class="mdi mdi-delete"></i>
                        <span>Move to trash</span>
                    </a>
                </li>
                <li class="dropdown-divider"></li>
                <li>
                    <a class="dropdown-link">
                        <i class="mdi mdi-undo"></i>
                        <span>Undo</span>
                    </a>
                </li>
                <li>
                    <a class="dropdown-link">
                        <i class="mdi mdi-redo"></i>
                        <span>Redo</span>
                    </a>
                </li>
                <li class="dropdown-divider"></li>
                <li>
                    <a class="dropdown-link">
                        <span>Zoom in</span>
                    </a>
                </li>
                <li>
                    <a class="dropdown-link">
                        <span>Zoom out</span>
                    </a>
                </li>
            </ul>
        </lx-dropdown-menu>
    </lx-dropdown>

    <lx-dropdown lx-position="right" lx-over-toggle="true" lx-width="250">
        <lx-dropdown-toggle>
            <lx-button lx-color="black" lx-type="icon">
                <i class="mdi mdi-dots-vertical"></i>
            </lx-button>
        </lx-dropdown-toggle>

        <lx-dropdown-menu>
            <ul>
                <li><a class="dropdown-link">An action</a></li>
                <li><a class="dropdown-link">Another action</a></li>
                <li><a class="dropdown-link">Something else here</a></li>
                <li class="dropdown-divider"></li>
                <li><span class="dropdown-link dropdown-link--is-header">Header</span></li>
                <li><a class="dropdown-link">Separated link</a></li>
            </ul>
        </lx-dropdown-menu>
    </lx-dropdown>
</div>
